<template>
    <view class="message">
        <view class="message-item" v-for="(item, index) in list" :key="item.id" @click="getDetails(item, index)">
            <view class="message-item-top">
                <view class="message-icon">
                    <view class="message-icon-icon">
                        <u-icon name="bell" color="#4DACB1" size="18"></u-icon>
                        <view class="message-icon-dot" v-if="item.status == '1'"></view>
                    </view>
                    <view class="message-icon-title">{{ item.senderName }}</view>
                </view>
                <view class="message-header-title-time">{{ item.sendTime }}</view>
            </view>
            <view class="message-item-msg">{{ item.title }}</view>
        </view>
        <uni-load-more :status="status" />
    </view>
</template>

<script>
export default {
    data() {
        return {
			params: {
				pageNum: 1,
				pageSize: 20,
			},
			total: 0,
			status: 'loading',
			refresh: false,
			list: []
        }
    },
    onLoad() {
		this.getData()
	},
    onReachBottom() {
		console.log('上拉加载onReachBottom')
		if (this.status == 'noMore' || this.status == 'loading') return
		this.params.pageNum = this.params.pageNum + 1
		this.status = 'loading'
		this.getData()
	},
    methods: {
        getData() {
			this.$http.get('/app/notification/list', this.params).then(res => {
				if (res.code == 200) {
					this.list = [...this.list, ...res.rows]
					this.total = res.total
					if (this.total > this.list.length) {
						console.log('有更多数据')
						this.status = 'more'
					} else {
						console.log('没更多数据')
						this.status = 'noMore'
					}
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
        getDetails(item, index) {
            // 0 已读 什么也不处理
            if(item.status == '0') return
            this.$http.get('/app/notification/' + item.id, {}).then(res => {
				if (res.code == 200) {
					this.$set(this.list[index], 'status', '0')
				}
			})
        }
    }

}
</script>

<style lang="scss" scoped>
.message {
    padding: 0 32rpx;
    .message-item {
        border-radius: 20rpx;
        background: #FFFFFF;
        padding: 32rpx;
        margin-top: 32rpx;
        .message-item-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 32rpx;
            .message-icon {
                display: flex;
                align-items: center;
                .message-icon-icon {
                    width: 52rpx;
                    height: 52rpx;
                    background: rgba(77, 172, 177, 0.2);
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 16rpx;
                    position: relative;
                    .message-icon-dot {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 7px;
                        height: 7px;
                        border-radius: 50%;
                        background: red;
                    }
                }
                .message-icon-title {
                    font-size: 36rpx;
                    font-weight: 500;
                    color: rgba(12, 16, 25, 1);
                }
            }
            .message-header-title-time {
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(103, 117, 133, 1);
            }

        }
        .message-item-msg {
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(103, 117, 133, 1);
        }
    }
}
</style>